<script setup lang="ts">
import {userInfoStore} from "~/stores/userInfoStore";
import MyTag from "~/components/constant/myTag.vue";

const props = defineProps({
  user: {
    type: Object,
    default: {
      "id": "",
      "name": "",
      "remarks": "无",
      "description": "",
      "orderIndex": null,
      "createTime": "",
      "updateTime": "",
      "imageUrl": "http://preview.qiantucdn.com/paixin/65/28/93/40Z58PICC9kY6E58PICnsuvEK_PIC2018.jpg!kuan320",
      "email": "",
      "phone": "",
      "state": "0",
      "isGet": null,
      "steamId": "",
      "gameId": "",
      "qq": "",
      "money": "0.00",
      "amount": "0.00",
      "gameName": "",
      "sex": "0",
      "introduction": "欢迎使用,有任何疑问或者BUG提交，请联系管理员",
      "address": "",
      "powerNumber": null,
      "powerId": "",
      "powerName": "",
      "roleName": null,
      "roleId": null,
      "discount": null
    }
  }
})
onMounted(() => {
  userInfoStore().initLogUser();
})

const otherMsgShow = ref(false);

</script>

<template>
  <div class="user-info-box">
    <div class="info-header">
      <div class="user-pic">
        <div class="pic-back">
          <el-image :src="user.imageUrl"/>
        </div>
        <div class="pic-avatar">
          <div class="piv-avatar-item">
            <el-avatar :src="user.imageUrl" :size="100"/>
          </div>
        </div>
      </div>
      <div class="user-msg">
        <div class="user-msg-item user-name">
          {{ user.name }}
        </div>
        <div class="user-msg-item user-power">
          <my-tag :data="user.powerName" :mapping="userInfoStore().getPowerTableOption()"/>
        </div>
        <div class="user-msg-item user-sex">
          <my-tag :data="user.sex"
                  :mapping='[ {type: "info", data: "", msg: "未知"}, {type: "success", data: "0", msg: "男"}, {type: "danger", data: "1", msg: "女"}]'/>
        </div>
        <div class="user-msg-item user-count-info">
          <div class="user-count-item">
            <div class="user-article-title">当前余额</div>
            <div class="user-article-count">{{ user.money }}</div>
          </div>
          <div class="user-count-item">
            <div class="user-article-title">累计消费</div>
            <div class="user-article-count">{{ user.amount }}</div>
          </div>
        </div>
        <div class="user-msg-item user-sign">
          {{ user.introduction }}
        </div>
        <span class="other-msg" @click="otherMsgShow = true">其他信息>></span>
      </div>
    </div>
    <div class="info-dialog">
      <el-dialog
          v-model="otherMsgShow"
          title="游戏相关信息"
          width="500">
        <div>
          <el-empty description="暂无"/>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<style scoped lang="scss">
.user-info-box {

  .info-header {
    user-select: none;

    :deep(.user-pic .el-image) {
      width: 100%;
      height: 10rem;
      filter: blur(0.3125rem);
    }

    .user-pic {
      position: relative;

      .pic-avatar {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 6rem;
        left: 36.875rem;
        border-radius: 50%;
        border: solid 0.625rem var(--body-bgc);
      }
    }

    .user-msg {
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
      margin-top: 3.1rem;

      .other-msg {
        font-size: .8rem;
        color: #D4D7DE;
        cursor: pointer;
      }
      .user-msg-item {
        display: flex;
        justify-content: space-around;
        padding: .3rem 0;

        .user-count-item {
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          padding: .5rem 1rem;
        }
      }
    }
  }


}
</style>